<template>
  <div class="copies-container">
    <c-tab-tree
      class="tab-tree-container"
      :tabOptions="tabTreeData"
      :checkTreeNode="checkTreeNode"
      :handleClick="handleClick"
      :treeData="treeData"
    ></c-tab-tree>
    <c-search-trans
      class="search-trans-container"
      :treeTitles="['所有用户', '已选用户']"
      :transforData="userData"
      v-model:transforVal="copiesData"
      :search="searchUser"
      v-if="treeData"
    ></c-search-trans>
    <c-search-trans-role
      class="search-trans-container"
      :treeTitles="['所有角色', '已选角色']"
      :transforRole="roleData"
      v-model:roleValA="roleCopiesData"
      :search="searchRole"
      v-if="!treeData"
    ></c-search-trans-role>
  </div>
</template>

<script>
import SearchTrans from "@/components/SearchTrans.vue";
import SearchTransRole from "@/components/SearchTransRole.vue";
import TabTree from "@/components/TabTree.vue";
import { mapActions, mapState } from "vuex";

export default {
  name: "GeneralCopies",
  components: {
    "c-tab-tree": TabTree,
    "c-search-trans": SearchTrans,
    "c-search-trans-role": SearchTransRole,
  },
  computed: mapState({
    // roleList: (state) => state.flowDesignStore.roleList,
    orgList: (state) => state.flowDesignStore.orgList,
    userList: (state) => state.flowDesignStore.userList,
  }),
  props: {
    copiesData: {
      type: Array,
    },
    roleCopiesData: {
      type: Array,
    },
  },
  data() {
    return {
      tabTreeData: [
        {
          label: "按用户设置",
          name: "org",
          data: [],
          props: { label: "name" },
        },
        {
          label: "按角色设置",
          name: "role",
          data: [],
        },
      ],
      treeData:true,
      userData: [],
      roleData: [],
      AllData: [],
      roleListData: [],
      roleFor: "",
      orgId:'',
      keyword:''
    };
  },
  emits: ["update:copiesData","update:roleCopiesData"],
  methods: {
    ...mapActions("flowDesignStore", [
      "getRoleList",
      "getUserList",
      "getOrgList",
    ]),
    checkTreeNode(tabName, node) {
      console.log(tabName,node,'checkTreeNode');
      if (this.roleFor == "按角色设置") {
        this.roleData.push(node);
      } else {
        this.orgId = node.id
        this.requestUser({
          [tabName + "Id"]: node.id,
          keyword:this.keyword
        });
      }
    },
    handleClick(tab) {
      if (tab.props.label == "按角色设置") {
        this.roleData = this.roleListData;
        this.treeData=false
      } else {
        this.treeData=true
        this.userData = this.AllData;
      }
      this.roleFor = tab.props.label;
    },
    searchUser(val) {
      this.keyword = val
      this.requestUser({
        keyword: val,
        orgId:this.orgId
      });
    },
    async searchRole(val) {
      const rst = await this.getRoleList({keyword:val, roleType: 2, });
      this.roleData = rst.data;
    },

    async requestUser(params) {
      params = params || {};
      params.size = 1011;
      const rst = await this.getUserList(params);
      if (!rst.status) {
        this.$message({
          type: "warning",
          message: rst.message,
        });
      } else {
        this.userData = rst.data;
        this.AllData = rst.data;
      }
    },
  },
  async beforeMount() {
    let orgList = this.orgList;

    const rst = await this.getRoleList({ roleType: 2 });
    this.roleListData = rst.data;

    if (!orgList) {
      const rst = await this.getOrgList();
      if (!rst.status) {
        this.$message({
          type: "warning",
          message: rst.message,
        });
      } else {
        orgList = rst.data;
      }
    }
    
    this.tabTreeData[1].data = "";
    this.tabTreeData[0].data = orgList;
    await this.requestUser();
  },
};
</script>
<style scoped lang="scss">
.copies-container {
  display: flex;
  .tab-tree-container {
    flex: 0 0 200px;
  }
  .search-trans-container {
    margin-left: 10px;
    flex: auto;
  }
}
</style>
